<template>
  <div class="login">
    <canvas ref="ref_canvas"/>
    <div class="block">
      <div class="text">用户登录</div>
      <CzrForm ref="ref_form"  @handleEnter="onLogin">
        <div class="form-label">账号</div>
        <CzrFormColumn
          :span="24"
          required
          v-model:param="state.form.username"
          default-error-msg="请输入账号"
        />
        <div class="form-label">密码</div>
        <CzrFormColumn
          :span="24"
          required
          v-model:param="state.form.password"
          type="password"
          show-password
          default-error-msg="请输入密码"
        />
      </CzrForm>
      <el-button @click="onLogin">登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import {init} from './login-bg'

const {proxy} = getCurrentInstance()
const router = useRouter()
const state: any = reactive({
  form: {
    username: '',
    password: '',
  },
})
const ref_form = ref()
const ref_canvas = ref()
const onLogin = () => {
  ref_form.value.submit().then(() => {
  }).catch((e) => {
    ElMessage({
      message: e[0].message,
      grouping: true,
      type: 'warning',
    })
  })
}
onMounted(() => {
  init(ref_canvas.value)
})
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url("./ground.png");
    background-size: 100% 100%;
    width: 100%;
    height: 480px;
    z-index: 20;
  }
  >canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .block {
    z-index: 30;
    display: flex;
    box-shadow: 0px 4px 10px 0px rgba(46,129,255,0.1);
    width: 440px;
    padding: 48px;
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(143, 143, 143, 0.51);
    .text {
      font-weight: 600;
      font-size: 28px;
      color: var(--cus-main-color);
      line-height: 38px;
      margin-bottom: auto;
    }
    .form-label {
      width: 100%;
      margin: 0 0 10px;
      font-weight: bold;
      font-size: 18px;
      color: var(--cus-text-color-2);
      line-height: 21px;
    }
    :deep(.el-form-item__label-wrap) {
      display: none;
    }
    :deep(.el-input) {
      height: 48px;
    }
  }
}
</style>
